<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <!-- 所有的scrip代码都要在这之下写，才能jQuery生效 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <title>渔网定位服务</title>
<!--  腾讯地图样式  -->
    <style type="text/css">
        #container{
            /*地图(容器)显示大小*/
            width:100%;
            height:100%;
        }
    </style>
    <!-- 引入样式 腾讯地图js -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=MA2BZ-UI6KM-NJD62-6YX4C-O22M6-HQBD6"></script>
    <style>
        #up-map-div {
            width: 300px;
            height: 100px;
            top: 30px;
            left: 30px;
            position: absolute;
            z-index: 9999;
            border: 1px solid blue;
            background-color: #FFFFFF;
        }

        button {
            background-color: dodgerblue;
            color: white;
            width: 300px;
            height: 100px;
            border: 0;
            font-size: 16px;
            border-radius: 30px;
        }
    </style>

    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(21.109384, 110.490444)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 14,   //设置地图缩放级别
            });
        }
    </script>
</head>
<body onload="initMap()">
<div id="container">
</div>
<!--这是悬浮按键-->
<!--<div id="up-map-div">-->
<!--    <button id="div_button" onclick="bth()">开始定位</button>-->
<!--</div>-->
<script>
    var start_longitude = null
    var start_latitude = null
    var stop_longitude = null
    var stop_latitude = null
    var locations = [];
    // var map = new BMapGL.Map("container");          // 创建地图实例
    // var point = new BMapGL.Point(110.464206, 21.103878);  // 创建点坐标
    // map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    selectAllPoint()

    //查询所有点
    function selectAllPoint() {
        $.ajax({
            type: "get",
            url: "https://localhost/locate/list",
            //异步关闭，默认true
            async: false,
            success: function (result) {
                locations = result.data
                for (j = 0; j < locations.length; j++) {
                    var position = locations[j]
                    var point = new BMapGL.Point(position.start_longitude, position.start_latitude);
                    var marker = new BMapGL.Marker(point);        // 创建标注
                    map.addOverlay(marker);                     // 将标注添加到地图中

                    var point1 = new BMapGL.Point(position.stop_longitude, position.stop_latitude);
                    var marker1 = new BMapGL.Marker(point1);        // 创建标注
                    map.addOverlay(marker1);                     // 将标注添加到地图中

                    //添加折线
                    var polyline = new BMapGL.Polyline([
                        new BMapGL.Point(position.start_longitude, position.start_latitude),
                        new BMapGL.Point(position.stop_longitude, position.stop_latitude),
                    ], {strokeColor: "blue", strokeWeight: 10, strokeOpacity: 0.5});
                    map.addOverlay(polyline);
                }
            }
        })
    }

    function getPosition(flag) {
        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {

                if (flag == 0) {
                    start_longitude = r.point.lng
                    start_latitude = r.point.lat
                    console.log("开始的" + start_longitude)
                    console.log("开始的" + start_latitude)
                } else {
                    stop_longitude = r.point.lng
                    stop_latitude = r.point.lat
                    console.log("结束的" + stop_longitude)
                    console.log("结束的" + stop_latitude)
                    //请求服务器保存
                    // 直接调用$.ajax()发起POST请求
                    $.ajax({
                        type: 'POST',    // 请求方式
                        url: 'https://localhost/locate/save',
                        data: {    // 此次请求需要提交的数据（需按api接口格式给定）
                            start_longitude: start_longitude,
                            start_latitude: start_latitude,
                            stop_longitude: stop_longitude,
                            stop_latitude: stop_latitude,
                        },
                        success: function (res) {    // 回调函数
                            alert(res.data)
                        }
                    })
                }
            } else {
                alert('定位失败，失败代码failed' + this.getStatus());
            }
        });
    }
    //改变颜色和文字
    var flat = false

    function bth() {
        if (flat) {
            flat = !flat
            document.getElementById("div_button").style.background = "dodgerblue"
            document.getElementById("div_button").innerText = "开始定位"
            //获取当前位置
            getPosition(1)
            //刷新point,
            selectAllPoint()

        } else {
            flat = !flat
            document.getElementById("div_button").style.background = "red"
            document.getElementById("div_button").innerText = "结束定位"
            //获取当前位置
            getPosition(0)

        }
    }


</script>


</body>
</html>
